var React = require("react");
var Item = require('./contactItem');

module.exports = React.createClass({

    getInitialState: function () {
        var me = this;
        sl:[];
        return {
            src: 'demo/images/group_user.png'
        };
    },

    update: function (id) {
        this.props.updateNode(id);
    },

    onscroll: function () {
        var scrollTop = this.refs.contactContainer.scrollTop;
        var scollTopNum = scrollTop / 60;
        if ((scrollTop / 60 + 10) == this.props[Demo.selectedCate].length) {
            this.props.getChatroom();
        }
    },
    search: function () {
        document.getElementsByClassName('search-downlist')[0].style.display='block';
        var searchVal = document.getElementById('list-search').value;
        if(searchVal===''){
            document.getElementsByClassName('search-downlist')[0].style.display='none';
            return;
        }
        var searchList=[];
        for(var i in WebIM.config.customData){
            var user=WebIM.config.customData[i];
            if(user.name_zh.indexOf(searchVal)>-1||user.name_en.indexOf(searchVal)>-1||user.shortname.indexOf(searchVal)>-1||user.showname.indexOf(searchVal)>-1) {
                searchList[user.shortname] = user.name_zh;
                searchList.push(<li key={i} id={user.shortname} onClick={this.toSearchList.bind(this,user.shortname)}>{user.name_zh}</li>)
            }
        }
        if(searchList.length===0){
            document.getElementsByClassName('search-downlist')[0].style.display='none';
            return;
        }
        this.setState({sl:searchList});
    },
    toSearchList:function (shortname) {
        document.getElementsByClassName('webim-contact-wrapper')[0].scrollTop=document.querySelector('.list-friend>#'+shortname+'').offsetTop-38;
        document.getElementsByClassName('search-downlist')[0].style.display='none';
    },
    render: function () {
        var f = [],
            g = [],
            s = [],
            c = [];
        /* for (var i = 0; i < this.props.customData.length; i++) {
         if (this.props.customData[i].name in this.props.blacklist) {
         continue;
         }
         f.push(<Item id={this.props.customData[i].name} cate='friends' key={i} username={this.props.customData[i].name}
         update={this.update} cur={this.props.curNode}/>);
         }*/
        for (var i = 0; i < this.props.friends.length; i++) {
            var self = this;
            if (self.props.friends[i].name in self.props.blacklist || self.props.friends[i].name_zh === Demo.user) {
                continue;

            }
            if (self.props.friends[i].shortname === '') {
                self.props.friends[i].shortname = self.props.friends[i].name_zh;
            }
            f.push(<Item id={self.props.friends[i].shortname} userId={self.props.friends[i].notesid}
                         cate='friends' key={i} index={i} username={self.props.friends[i].shortname}
                         name_zh={self.props.friends[i].name_zh}
                         update={self.update} cur={self.props.curNode}/>);
        }

        for (var i = 0; i < this.props.groups.length; i++) {
            g.push(<Item id={this.props.groups[i].roomId} cate='groups' key={i} username={this.props.groups[i].name}
                         update={this.update} cur={this.props.curNode} src={this.state.src}/>);
        }

        for (var i = 0; i < this.props.chatrooms.length; i++) {
            c.push(<Item id={this.props.chatrooms[i].id} cate='chatrooms' key={i}
                         username={this.props.chatrooms[i].name} update={this.update} cur={this.props.curNode}
                         src={this.state.src}/>);
        }

        for (var i = 0; i < this.props.strangers.length; i++) {
            s.push(<Item id={this.props.strangers[i].name} cate='strangers' key={i}
                         username={this.props.strangers[i].name} update={this.update} cur={this.props.curNode}/>);
        }

        return (
            <div ref='contactContainer' className='webim-contact-wrapper' onScroll={this.onscroll}>
                <div className="list-search-wrap">
                    <input className="list-search " type="text" id="list-search" placeholder="联系人搜索" onKeyUp={this.search}/>
                    <div className="search-downlist">
                        <ul>
                            {this.state.sl}
                        </ul>
                    </div>
                </div>
                <div className={'list-friend'}>{f}</div>
                <div className={this.props.cur === 'group' ? '' : ' hide'}>{g}</div>
                <div className={this.props.cur === 'chatroom' ? '' : ' hide'}>{c}</div>
                <div className={this.props.cur === 'stranger' ? '' : ' hide'}>{s}</div>
                <div ref='loading' className={'webim-contact-loading ' + (this.props.loading ? '' : 'hide')}>
                    <img src='demo/images/loading.gif'/>
                </div>
            </div>
        );
    }
});
